!<template>
  <div style="overflow: hidden;">
    <div class="fiedxBox" style="display: flex;justify-content: space-between;width: 100%;padding:15px 10px 0 5px;align-items: center;">
        <img style="width:70%;" src="@/assets/images/logo(1).png" alt="">
        <span style="width:25%;color:#307397;font-weight:700;letter-spacing: 2px;border-left: 1px solid #307397;text-align: right;">公众参与</span>
    </div>
    <div class="contEnt_box">
      <el-form ref="form" label-position="top" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="姓名" prop="publicName">
          <el-input v-model="form.publicName" placeholder="请输入提交人姓名" />
        </el-form-item>
        <el-form-item label="手机号" prop="photonumber">
          <el-input v-model="form.photonumber" placeholder="请输入手机号" />
        </el-form-item>
        <el-form-item label="属地" prop="area">
          <el-select style="width: 100%;" v-model="form.area" placeholder="请选择舆情属地">
            <el-option
              v-for="dict in dict.type.ps_possession"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细地址" prop="address">
          <el-input v-model="form.address" placeholder="请输入详细地址" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <editor v-model="form.content" :height="200"/>
        </el-form-item>
      </el-form>
      <div style="display: flex;justify-content: center;">
         <el-button size="small" :loading="isLoading"  type="primary" @click="submitForm">提 交</el-button>
      </div>

    </div>
  </div>
</template>

<script>
  import { addFrom } from "@/api/participation/participation";
  var validatorPhone = function (rule, value, callback) {
    if(!/^1\d{10}$/.test(value)){
      callback(new Error('手机号格式错误'))
    }else {
      callback()
    }
  }
  export default {
    dicts: ['ps_possession'],
    data(){
      return{
        isLoading:false,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          title: [
            { required: true, message: '请输入标题', trigger: 'blur' },
          ],
          publicName: [
            { required: true, message: '请输入姓名', trigger: 'blur' },
          ],
          area: [
            { required: true, message: '请选择属地', trigger: 'change' },
          ],
          content: [
            { required: true, message: '请填写内容', trigger: 'blur' },
          ],
          photonumber: [
            { required: false, validator: validatorPhone, trigger: 'blur' },
          ],
        }
      }
    },
    methods:{
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            this.isLoading = true
            addFrom(this.form).then(response => {
              this.isLoading = false
              this.$modal.msgSuccess("提交成功");
              this.reset();
            });
          }
        });
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          title: null,
          publicName: null,
          sex: 0,
          area: null,
          address: null,
          content: null,
          photonumber: null,
          ip: null,
          status: 0
        };
        this.resetForm("form");
      },
    }
  }
</script>

<style scoped lang="scss">
.contEnt_box{
  width: 100%;
  box-sizing: border-box;
  padding: 20px;
  margin-top:50px;
}
::v-deep .el-form-item__label{
  padding: 0 !important;
}
.fiedxBox{
  position: fixed;
  background: #fff;
  z-index: 999;
}
</style>
